<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
    >
      <el-form-item label="书名" prop="title">
        <el-input
          v-model="queryParams.title"
          placeholder="请输入书名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="作者" prop="author">
        <el-input
          v-model="queryParams.author"
          placeholder="请输入作者"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="出版社" prop="publishername">
        <el-input
          v-model="queryParams.publishername"
          placeholder="请输入书名"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item label="图书发布状态" prop="status">
        <el-select class="!w-240px" v-model="queryParams.status" placeholder="请选择">
          <el-option label="未报审" value="0"/>
          <el-option label="审核中" value="1"/>
          <el-option label="已发布" value="10"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon icon="ep:search" class="mr-5px"/>
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon icon="ep:refresh" class="mr-5px"/>
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
      <el-table-column align="center" label="书名" fixed="left" prop="title"/>
      <el-table-column align="center" label="作者" fixed="left" prop="author"/>
      <el-table-column align="center" label="出版社" fixed="left" prop="publishername"/>
      <el-table-column align="center" label="抽取状态" fixed="left" prop="graphState">
        <template #default="scope">
          <span>{{ scope.row.graphState == 0 ? "未抽取" : scope.row.graphState == 1 ? "抽取中" : "抽取完成" }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="图书发布状态" fixed="left" prop="status">
        <template #default="scope">
          <span>{{ scope.row.status == 0 ? "未报审" : scope.row.status == 1 ? "审核中" : "已发布" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="150">
        <template #default="scope">
          <el-button link type="primary" v-if="scope.row.graphState == 0" @click="extract(scope.row)">
            自动抽取
          </el-button>
          <el-button link type="primary" v-if="scope.row.graphState == 2" @click="check(scope.row.id)">
            审核
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination :current-page="queryParams.currentPage" :page-size="queryParams.pageSize"
                   :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
                   layout="total, sizes, prev, pager, next, jumper" :total="queryParams.count"
                   @tab-click="handleTabClick"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>

  </ContentWrap>
</template>

<script lang="ts" setup>
import {DICT_TYPE} from '@/utils/dict'
import router from '@/router'
import * as FormApi from "@/api/kg/process/check";

import * as authUtil from "@/utils/auth";
import {ref} from "vue";
import {getBookByPage} from "@/api/kg/process/check";

defineOptions({name: 'KGProcessIndex'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const loading = ref(false)
const total = ref(0)
const list = ref([
  {
    title: '毛泽东的神来之笔——记中央红军长征中的四渡赤水抢渡金沙江之战',
    status: 2
  },
  {
    title: '中国工农红军',
    status: 0
  },
  {
    title: '中国工农红军通览',
    status: 1
  }
])
// 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 1,
  title: undefined,
  author: undefined,
  publishername: undefined,
  status: undefined,
  graphState: undefined,
})

const handleQuery = () => {
  getTableData()
}
const queryFormRef = ref<any>()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  console.log(queryParams)
  getTableData()
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getTableData()
}
const getTableData = async () => {
  const params = {
    pageNo: queryParams.pageNo,
    pageSize: queryParams.pageSize,
    title: queryParams.title,
    author: queryParams.author,
    publishername: queryParams.publishername,
    status: queryParams.status,
    graphState: queryParams.graphState,
  }
  FormApi.getBookByPage( params).then((res) => {
    // res.list.forEach((item) => (item.cover = JSON.parse(item.cover)))
    list.value = res.list
    queryParams.count = res.total
  })
}
//抽取
const extract = (row) => {
  if (row.graphState == 1 || row.graphState == 2) {
    message.error('已抽取')
    return
  } else {
    message.success('系统正在进行抽取，请稍等。')
  }
}

const check = (bookId) => {
  router.push({path: '/kg/process/check'})
}

onMounted(() => {
  getTableData()
})
</script>

<style scoped></style>
